<template>
    <div class="receipt-order-print" ref="receiptOrderPrintRef" hidden="hidden">
      <!-- <div class="title">{{ 'Instruct' }}</div> -->
      <div class="title">{{ '指令' }}</div>
      <div class="summary"></div>
      <table class="common-table">
        <tr>
          <!-- <th>Instruction Name</th>
          <th>Notes</th> -->
          <th>指令名称</th>
          <th>备注</th>
        </tr>
        <tr v-for="it in row">
          <td>{{ it.title || '' }}</td>
          <td>{{ it.remarks || '' }}</td>
        </tr>
      </table>
    </div>
  </template>
  
  <script>
  
  export default {
    props: ['row'],
    methods: {
      start() {
        this.$print(this.$refs.receiptOrderPrintRef, {}, 'A4')
      },
    }
  }
  </script>
  
  <style lang="stylus" media="print">
  @page {
    size: auto;
    margin: 0;
  }
  
  @media print {
    * {
      color: #000 !important;
    }
  
    table {
      width 100%
      table-layout: fixed;
      border-collapse: collapse;
      border-spacing: 0;
    }
  
    table, tbody, thead {
      width: 100% !important;
    }
  
    .receipt-order-print {
      width: 100% !important;
      font-size: 14px;
    }
  
    table, table tr th, table tr td {
      border: 0.05rem solid #000;
      font-size: 12px;
    }
  
  }
  
  .receipt-order-print
    padding 12px
    line-height 1.8
  
    .summary
      display flex
      flex-wrap wrap
  
      .col1
        width 50%
  
    .title
      font-size 18px
      text-align center
  
    .common-table
      td, th
        border-color black
  </style>
  